<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>单选/复选/开关</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <link rel="stylesheet" href="../style/weui.css"/>
    <link rel="stylesheet" href="../style/weui2.css"/>
    <script src="../zepto.min.js"></script>

</head>

<body ontouchstart>

<div class="bd spacing">
    <a href="javascript:;" class="weui_btn weui_btn_primary">按钮</a>
    <a href="javascript:;" class="weui_btn weui_btn_disabled weui_btn_primary">按钮</a>
    <a href="javascript:;" class="weui_btn weui_btn_warn">确认</a>
    <a href="javascript:;" class="weui_btn weui_btn_disabled weui_btn_warn">确认</a>
    <a href="javascript:;" class="weui_btn weui_btn_default">按钮</a>
    <a href="javascript:;" class="weui_btn weui_btn_disabled weui_btn_default">按钮</a>

    <a href="javascript:;" class="weui_btn bg-blue">蓝色bg-blue</a>
    <a href="javascript:;" class="weui_btn weui_btn_disabled bg-blue">蓝色</a>

    <a href="javascript:;" class="weui_btn bg-orange">橙色bg-oange</a>
    <a href="javascript:;" class="weui_btn weui_btn_disabled bg-orange">橙色</a>
    <div class="button_sp_area">
        <a href="javascript:;" class="weui_btn weui_btn_plain_default">按钮</a>
        <a href="javascript:;" class="weui_btn weui_btn_plain_primary">按钮</a>
        <a href="javascript:;" class="weui_btn bg-blue-b">蓝色bg-blue-b</a>
        <a href="javascript:;" class="weui_btn bg-orange-b">橙色bg-orange-b</a>
        <a href="javascript:;" class="weui_btn weui_btn_mini weui_btn_primary">按钮</a>
        <a href="javascript:;" class="weui_btn weui_btn_mini weui_btn_default">按钮</a>
    </div>
</div>

<div class="bd">
    <div class="row">
        <div class="col-50 ui-border">50%</div>
        <div class="col-50 ui-border">50%</div>
    </div>
    <div class="row">
        <div class="col-33"><a href="javascript:;" class="weui_btn weui_btn_primary">登录</a></div>
        <div class="col-33"><a href="javascript:;" class="weui_btn weui_btn_primary">取消</a></div>
        <div class="col-33"><a href="javascript:;" class="weui_btn weui_btn_primary">重试</a></div>
    </div>
    <div class="row">
        <div class="col-20">20%</div>
        <div class="col-80">80%</div>
    </div>
    <h2>无间距</h2>
    <div class="row no-gutter">
        <div class="col-20 ui-border">20%</div>
        <div class="col-80 ui-border">80%</div>
    </div>
    <div class="row no-gutter">
        <div class="col-50">50%</div>
        <div class="col-50">50%</div>
    </div>
</div>

<article class="weui_article">
    <h1>字体大小与颜色</h1>
    <section>

        <section>
            <h3>字体大小</h3>
            <p><span class='f11'>字体f11</span><span class='f12'>字体f12</span><span class='f13'>字体f13</span>
                <span class='f114'>字体f14</span><span class='f15'>字体15</span><span class='f116'>字体f16</span>
                <span class='f31'>字体f31</span><span class='f32'>字体f32</span><span class='f35'>字体f35</span>
                <span class='f40'>字体f40</span><span class='f45'>字体f45</span><span class='f50'>字体f50</span>
                <span class='f55'>字体f55</span>
            </p>
        </section>
        <section>
            <h3>字体颜色/背景</h3>
            <p>
                <span class='f-red'>红色f-red</span><span class='f-green'>绿色f-green</span>
                <span class='f-blue'>蓝色f-blue</span><span class='f-black'>f-black</span>
                <span class='f-white bg-blue'>f-white</span> <span class='f-zi'>f-zi</span> <span class='f-gray'>灰色f-gray</span>
                <span class='f-yellow'>黄色</span><span class='f-orange'>f-orange</span><span class='f-white bg-blue'>背景蓝色bg-blue</span>
                <span class='bg-orange f-white'>bg-orange</span>
                <span class='weui_btn_primary f-white'>背景绿色weui_btn_primary</span>
                <span class='weui_btn_warn f-white'>weui_btn_warn</span>

                <span class='weui_btn_default f-red'>weui_btn_default</span>
            </p>
        </section>
    </section>
</article>


</body>
</html>
